<template>
    <view class="activity_status">
        <view class="activity_status_left">
            <view v-if="props.state.activity?.activityType == 2" class="price_wrap">
                <text>秒杀价 ￥</text>
                <text>{{ activityPrice[0] }}</text>
                <text v-if="activityPrice[1]">.{{ activityPrice[1] }}</text>
                <text v-if="minPrice != maxPrice">起</text>
                <text class="yuanjia"> ¥{{ price }} </text>
            </view>
            <view v-else class="price_wrap_group">
                <view class="group_top">
                    <view class="group_top_price">
                        <text>¥ </text>
                        <text>{{ activityPrice[0] }}</text>
                        <text v-if="activityPrice[1]">.{{ activityPrice[1] }}</text>
                        <text v-if="minPrice != maxPrice">起</text>
                    </view>
                    <text class="group_num">{{ props.state.activity?.spellActivityGroupMixNum }}人团</text>
                </view>
                <view class="yuanjia yuanjia_mg"> ¥ {{ price }}<text v-if="isConstPrice">起</text> </view>
            </view>
        </view>

        <view class="activity_status_right">
            <view v-if="props.state.activity?.activityStatusName.realStatus == 3" class="countdown">
                <view class="activity_end">活动已结束</view>
            </view>
            <view v-else class="countdown">
                <view class="activity_off"
                    >距{{ props.state.activity?.activityStatusName.realStatus == 1 ? '开始' : '结束' }}仅剩</view
                >
                <view class="activity_time"
                    ><countdownVue
                        :format="`${nowTime - new Date().getTime() > 86400000 ? 'DD天' : ''}HH:mm:ss`"
                        :endTime="nowTime"
                /></view>
            </view>
        </view>
    </view>
</template>

<script setup>
import countdownVue from '@/components/countdown';
import { cloneDeep, getTimeStamp } from '@/commons/utils';
import { ref, inject, computed, watch } from 'vue';

const props = defineProps({
    state: {
        type: Object,
        default: () => ({})
    }
});
const emit = defineEmits(['arrive']);
const currency = inject('currency');
const price = ref(''); // 原价
const minPrice = ref(''); // 最低价
const maxPrice = ref(''); // 最高价
const activityPrice = computed(() => {
    return minPrice.value.toString().split('.');
});
// 原价最低价最高价是否相等
const isConstPrice = computed(() => {
    return props.state.goodsMinPrice != props.state.goodsMaxPrice;
});
const nowTime = computed(() => {
    let nowTime =
        props.state.activity?.activityStatusName.realStatus == 1
            ? props.state.activity?.activityStartTime
            : props.state.activity?.activityEndTime;
    return getTimeStamp(nowTime);
});
watch(
    () => props.state,
    v => {
        let data = cloneDeep(v);
        if (data.activity?.activityType == 2) {
            let sortArr = data.activity?.activityGoods.sort((a, b) => a.spikePrice - b.spikePrice);
            minPrice.value = currency(sortArr[0].spikePrice).divide(100).value;
            maxPrice.value = currency(sortArr[sortArr.length - 1].spikePrice).divide(100).value;
            price.value = currency(data.goodsMinPrice).divide(100).value;
        } else if (data.activity?.activityType === 5) {
            minPrice.value = currency(data.activity?.spellActivityGroupInfo?.minPrice).divide(100).value;
            maxPrice.value = currency(data.activity?.spellActivityGroupInfo?.maxPrice).divide(100).value;
            price.value = currency(data?.goodsMinPrice).divide(100).value;
        } else if (data.activity?.activityType > 2) {
            let sortArr = data.activity?.spellActivityPrice.sort((a, b) => a.spellPrice - b.spellPrice);
            minPrice.value = currency(sortArr[0].spellPrice).divide(100).value;
            maxPrice.value = currency(sortArr[sortArr.length - 1].spellPrice).divide(100).value;
            price.value = currency(data?.goodsMinPrice).divide(100).value;
        }
    },
    { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.activity_status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 140rpx;
    padding: 0 28rpx;
    // background: linear-gradient(90deg, #ff5356 0%, #fe292b 100%);
    background-image: url('');
    background-size: 100% 100%;
    color: #fff;

    line-height: 1;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;

    .activity_status_left {
        .yuanjia {
            margin-left: 18rpx;
            font-weight: 400 !important;
            text-decoration: line-through;
        }
        .yuanjia_mg {
            margin-left: 5rpx;
        }
        .price_wrap {
            text {
                font-weight: bold;
                &:nth-child(2) {
                    font-size: 48rpx;
                }
            }
        }
        .price_wrap_group {
            .group_top {
                margin-bottom: 8rpx;
                display: flex;
                align-items: center;
                .group_top_price {
                    display: flex;
                    align-items: baseline;
                    text {
                        font-weight: bold;
                        &:nth-child(2) {
                            font-size: 48rpx;
                        }
                    }
                }
                .group_num {
                    padding: 10rpx 18rpx;
                    margin-left: 20rpx;
                    border-radius: 26rpx;
                    background-color: #fff;
                    font-size: 24rpx;
                    color: #fe292b;
                }
            }
        }
    }
    .activity_status_right {
        .countdown {
            .activity_off {
                min-width: 180rpx;
                max-width: 200rpx;
                text-align: center;
                font-size: 24rpx;
            }
            .activity_time {
                text-align: center;
                margin-top: 16rpx;
                font-weight: bold;
            }
            .activity_end {
                font-size: 29rpx;
                font-weight: 500;
                color: #ffffff;
            }
        }
    }
}
</style>
